import {messages} from "share/common";
import React, { Component } from "react"
import DefaultList from "components/transfer/default-list"
import { Input, Checkbox } from 'antd'

const { Search } = Input;

const NotFoundContent = ({ direction }) => {
  return (
    <div style={{lineHeight: '32px', color: '#B5C0CE'}}>
      {direction === 'left' ? messages('common.no.data')/*无数据*/ : messages('common-1.key696')/*无数据，请从左侧选择*/}
    </div>
  )
};

class List extends Component {

  state = {
    filterValue: this.props.searchValue(this.props.direction) || ''
  };

  componentWillReceiveProps(nextProps) {
    const { filterValue } = this.state;
    let value = nextProps.searchValue(nextProps.direction);
    if (value !== filterValue) {
      this.setState({ filterValue: typeof value === 'string' ? value : filterValue })
    }
  }

  renderListNode = filteredRenderItems => {
    const { renderList } = this.props;
    let bodyContent = renderList ? renderList({...this.props, filteredRenderItems}) : null;
    const customize = !!bodyContent;
    if (!customize) {
      bodyContent = DefaultList({...this.props, filteredRenderItems});
    }
    return {
      customize,
      bodyContent
    };
  };

  getListBody = filteredRenderItems => {
    const { showSearch, searchPlaceholder = '', extraSearch, direction } = this.props;
    const { filterValue } = this.state;
    const search = showSearch ? (
      <div className={'transfer-list-search'}>
        {extraSearch(direction)}
        <Search
          placeholder={searchPlaceholder}
          value={filterValue}
          onChange={this.handleFilter}
        />
      </div>
    ) : null;
    const { bodyContent, customize } = this.renderListNode(filteredRenderItems);
    let bodyNode;
    if (customize) {
      bodyNode = bodyContent;
    } else {
      bodyNode = filteredRenderItems.length ? (
        bodyContent
      ) : (
        <NotFoundContent direction={direction}/>
      );
    }
    return (
      <div className={'body'}>
        {search}
        <div className={'transfer-list-content'} style={{height: `calc(100% - ${showSearch ? 57 : 0}px)`}}>
          {bodyNode}
        </div>
      </div>
    );
  };

  handleFilter = e => {
    const { handleFilter, searchValue, direction } = this.props;
    const { target: { value: filterValue }, } = e;
    if (!searchValue(direction))
      this.setState({ filterValue });
    handleFilter(e);
  };

  getFilteredItems = () => {
    const { filterValue } = this.state;
    const { dataSource, render, labelKey } = this.props;
    const filteredRenderItems = [];
    dataSource.length && dataSource.forEach(item => {
      if (item[labelKey || render].indexOf(filterValue) > -1) {
        filteredRenderItems.push({
          item,
          renderedItem: typeof render === 'string' ? item[render] : render(item)
        });
      }
    });
    return { filteredRenderItems };
  };

  getCheckBox = () => {
    const { checkedKeys, dataSource, onAllSelect } = this.props;
    let temp = checkedKeys.length / dataSource.length;
    return dataSource.length ? (
      <Checkbox
        checked={temp === 1}
        style={{fontWeight: 400}}
        indeterminate={temp > 0 && temp < 1}
        onChange={() => {
          if (temp === 1) {
            onAllSelect([]);
          } else {
            onAllSelect(dataSource.map(item => item.key))
          }
        }}
      >
        {checkedKeys.length}/{dataSource.length}
      </Checkbox>
    ) : null;
  };

  render () {
    const { style, titleText, showSelectAll } = this.props;
    const { filteredRenderItems } = this.getFilteredItems();
    return (
      <div style={style} className={'transfer-list'}>
        <div className={'transfer-list-title'}>
          {
            showSelectAll && (this.getCheckBox())
          }
          {titleText}
        </div>
        {this.getListBody(filteredRenderItems)}
      </div>
    )
  }

}

export default List
